<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if / v-show </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><button v-on:click="flag = !flag">点击 {{flag?'隐藏':'显示'}} </button></p>
        <div v-if="flag">
            <img style="width: 500px;height: 150px;" :src="url" alt=""> <!-- : 是v-bind的简写 -->
        </div>

        <p><button v-on:click="ok = !ok">点击 {{ok?'隐藏':'显示'}} </button></p>
        <div v-show="ok">
            <img style="width: 300px;height: 150px;" :src="src" alt=""> <!-- : 是v-bind的简写 -->
        </div>
    </div>
</body>
<!-- 
    v-if 条件渲染 指令的表达式返回为真 才会真正的渲染
                 表达式的值为false 则什么都不做 不会渲染DOM
                
    v-show 指令通过 display 来控制显示和隐藏  带有 v-show 的元素会始终渲染到 DOM   只是简单的样式切换

    v-if 是"真正"的条件渲染  v-if 也是惰性的,如果初始化渲染的条件为假,则什么都不做,一直到条件第一次变为真时,才会开始渲染条件块

    v-show 不管条件为真为假,都会渲染到 DOM  , 简单的基于 css 进行样式的切换

    使用场景(使用频率)
    v-if 有更高的切换开销,在切换条件很少改变的情况下,推荐使用 v-if  v-if 实现初始化内部的数据变量

    v-show 有更高的初始渲染开销  在切换条件很少改变的情况下 推荐使用 v-show

    v-if 与 v-for 一起使用 (不推荐)
    如果一定要用  
    v-for 比 v-if 有更高的优先级 
    v-if 写在 v-for(循环) 的外面 
    
    异步数据 
    错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 
 -->
<script>
    const vm = new Vue({
        data:{
            msg:"hello Vue!",
            url:"https://fms.res.meizu.com/dms/2021/04/02/904063b7-9315-479f-a751-fba562350682.jpg",
            src:"https://imedl.sogoucdn.com/cache/skins/uploadImage/2020/05/11/1589197110_former.gif",
            flag:true,
            ok:true
        }
    }).$mount("#app")
</script>

</html>